<template>
  <div class="menu-container">
    <el-row :gutter="20">
      <!-- 左侧菜单树 -->
      <el-col :span="8" class="menu-left">
        <div style="display:flex; margin:10px 0px">
          <el-input
            style="width:50%; margin-right:10px"
            v-model="filterTree"
            clearable
            placeholder="请输入菜单名称"
            size="small"
          ></el-input>
          <el-button type="primary" size="small" @click="addMenu">添加菜单</el-button>
        </div>
        <!-- el-scrollbar是el中的隐藏组件 -->
        <el-scrollbar style="height:100%">
          <el-tree
            ref="tree"
            :highlight-current="true"
            node-key="id"
            :data="menus"
            :props="defaultProps"
            :render-content="renderContent"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-scrollbar>
      </el-col>
      <!-- 右侧保存数据 -->
      <el-col :span="15" class="menu-right">
        <el-form ref="menuForm" :model="menuForm" :rules="rules" label-width="80px">
          <el-col :span="24" v-if="type===3">
            <el-form-item label="上级菜单">
              <el-input v-model="name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单类型">
              <el-radio-group v-model="menuForm.type">
                <el-radio :label="1">目录</el-radio>
                <el-radio :label="2">菜单</el-radio>
                <el-radio :label="3">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单图标">
              <el-popover
                placement="bottom-start"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <!-- <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" /> -->
                <el-input
                  slot="reference"
                  v-model="menuForm.icon"
                  placeholder="点击选择图标"
                  size="samll"
                  readonly
                >
                  <svg-icon
                    v-if="menuForm.icon"
                    slot="prefix"
                    :icon-class="menuForm.icon"
                    style="width: 25px;"
                  />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="menuForm.name" size="small" placeholder="请输入菜单名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单排序">
              <el-input-number
                v-model="menuForm.sorted"
                controls-position="right"
                :min="0"
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="menuForm.type !== 3">
            <el-form-item label="路由地址" prop="path">
              <el-input v-model="menuForm.path" size="small" placeholder="请输入路由地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="menuForm.type === 2 || menuForm.type === 3">
            <el-form-item label="权限字符" prop="permission">
              <el-input v-model="menuForm.permission" size="small" placeholder="请输入权限字符"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件路径" prop="component" v-if="menuForm.type === 2">
              <el-input
                v-model="menuForm.component"
                size="small"
                placeholder="请输入组件路径，如system/menu/index"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单状态" v-if="menuForm.type !== 3">
              <el-radio-group v-model="menuForm.status">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否隐藏" v-if="menuForm.type !== 3">
              <el-radio-group v-model="menuForm.hidden">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否缓存">
              <el-radio-group v-model="menuForm.isCache">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-form>
        <div class="footer" style="text-align:center;">
          <el-button
            v-if="type !== 0"
            type="primary"
            @click="submit"
            size="small"
            style="margin:20px 0px;width:20%;"
            v-text="type === 1? '添加' : type === 2?'编辑':'添加子节点'"
          ></el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { list, save, update, del } from "@/api/menu";
// import IconSelect from "@/components/IconSelect";
export default {
  name: "menuIndex",
  data() {
    return {
      filterTree: "",
      type: 0,
      name: "",
      menus: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      menuForm: {
        pid: 0,
        type: 1,
        status: 1,
        hidden: 1,
        isCache: 1,
        sorted: 0,
        name: "",
        permission: "",
        component: ""
      },
      rules: {
        name: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ],
        permission: [
          { required: true, message: "权限字符不能为空", trigger: "blur" }
        ],
        component: [
          { required: true, message: "组件路径不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.list();
  },
  methods: {
    async list() {
      const { data } = await list(this.searchForm);
      this.menus = data;
    },
    addMenu() {
      this.reset();
      this.type = 1;
    },
    // 添加子节点
    addChildMenu(node, data, event) {
      this.reset();
      this.type = 3;
      this.menuForm.pid = data.id;
      this.name = data.name;
      event.stopPropagation(); // 阻止事件冒泡 --》 handleNodeClick（）
    },
    handleNodeClick(data) {
      this.type = 2;
      const obj = { ...data };
      this.menuForm = obj;
    },
    submit() {
      this.$refs["menuForm"].validate(async isOk => {
        if (isOk) {
          if (this.menuForm.id) {
            await update(this.menuForm);
          } else {
            await save(this.menuForm);
          }
          this.reset();
          this.list();
        }
      });
    },
    remove(node, data, event) {
      event.stopPropagation(); // 阻止事件冒泡 --》 handleNodeClick（）
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          if (data.children.length > 0) {
            this.$message({
              type: "warning",
              message: "此菜单下面存在子级菜单，禁止删除"
            });
          } else {
            await del(data.id);
            this.reset();
            this.list();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 渲染tree按钮
    renderContent(h, { node, data, store }) {
      return (
        <span style="flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;">
          <span>{node.label}</span>
          <span>
            <el-button
              size="small"
              type="text"
              class="el-icon-plus"
              on-click={event => this.addChildMenu(node, data, event)}
            ></el-button>
            <el-button
              size="small"
              type="text"
              class="el-icon-delete"
              on-click={event => this.remove(node, data, event)}
            ></el-button>
          </span>
        </span>
      );
    },
    reset() {
      this.type = 0;
      this.menuForm = {
        pid: 0,
        type: 1,
        status: 1,
        hidden: 1,
        isCache: 1,
        sorted: 0,
        name: null,
        permission: null,
        component: null,
        componentName: null
      };
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  },
  watch: {
    filterTree(val) {
      this.$refs["tree"].filter(val);
    }
  }
};
</script>

<style lang="scss">
.menu {
  &-container {
    margin: 30px;
  }

  &-left,
  &-right {
    height: 600px;
    background-color: #fff;
    padding: 10px 20px;
  }
  &-left {
    margin-right: 5px;
  }

  &-condition {
    display: flex;
    flex-wrap: wrap;
  }
}

.menu-container
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #a8c8ed;
}
</style>